<template>
  <div class="home">
    <Header /> <!-- 引入Header组件 -->
    <div class="container mt-5">
      <h1 class="text-primary mb-4">热门美食</h1>
      <div class="row">
        <FoodItem
          v-for="food in foods"
          :key="food.id"
          :food="food"
          @delete-food="deleteFood"
          class="col-md-4 mb-4"
        /> <!-- 循环显示每个FoodItem组件 -->
      </div>
    </div>
    <Footer /> <!-- 引入Footer组件 -->
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import Header from '@/components/Header.vue';
import Footer from '@/components/Footer.vue';
import FoodItem from '@/components/FoodItem.vue';

export default {
  components: {
    Header, // 注册Header组件
    Footer, // 注册Footer组件
    FoodItem, // 注册FoodItem组件
  },
  computed: {
    ...mapState(['foods']), // 映射Vuex的foods状态
  },
  methods: {
    ...mapActions(['fetchFoods', 'removeFood']), // 映射Vuex的actions
    async deleteFood(foodId) {
      await this.removeFood(foodId); // 调用removeFood方法删除食物
    },
  },
  mounted() {
    this.fetchFoods(); // 组件挂载时调用fetchFoods方法
  },
};
</script>

<style scoped>
.home {
  text-align: center; /* 设置home类的文本居中对齐 */
  padding-top: 50px; /* 设置顶部填充距离 */
}

.container {
  max-width: 1200px; /* 设置容器最大宽度 */
  margin: 0 auto; /* 设置自动水平外边距以居中对齐 */
}

.text-primary {
  color: #007bff; /* 设置文本的主要颜色 */
}
</style>
